<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <base href="">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <style>
        h1,
        h2,
        h3,
        article>footer {
            background: grey;
            color: white;
        }

        hgroup>h1 {
            margin-bottom: 0px;
            margin-top: 0px;
        }

        hgroup>h2 {
            background: grey;
            color: white;
            font-size: 1em;
            margin-top: 0px;
            margin-bottom: 2px;
        }

        body>header *,
        footer>* {
            background: transparent;
            color: black;
        }

        article {
            border: thin black solid;
            padding: 10px;
            margin-bottom: 5px;
        }

        article>footer {
            padding: 5px;
            margin: 10px;
            text-align: center;
        }

        article>footer>nav>a {
            color: white;
        }

        body>article>section,
        body>article>section>section {
            margin-left: 10px;
        }

        body>header,
        body>footer {
            border: medium solid black;
            padding-left: 5px;
            margin: 10px 0 10px 0;
        }

        body>nav {
            text-align: center;
            padding: 2px;
            border: dashed thin black;
        }

        body>nav>a {
            padding: 2px;
            color: black;
        }

        aside {
            width: 40%;
            background: white;
            float: right;
            border: thick solid black;
            margin-left: 5px;
        }

        aside>section {
            padding: 5px;
        }

        aside>h1 {
            background: white;
            color: black;
            text-align: center
        }
    </style>
</head>

<body>
    <header>
        <hgroup>
            <h1>Things I like</h1>
            <h2>by Adam Freeman</h2>
        </hgroup>
        <!-- address元素表示文档或aritcle元素的联系信息 -->
        <address>
            Questions and comments? <a href="mailto:adam@myboringblog.com">Email me</a>
        </address>
        <!-- nav元素，表示文档中的一个区域，包含着到其他页面或同一页面的其他部分的连接 -->
        <nav>
            <h1>Contents</h1>
            <ul>
                <li><a href="#fruitsilike">Fruits I Like</a></li>
                <li><a href="#activitiesilike">Activities I Like</a></li>
            </ul>
        </nav>
    </header>
    <!-- <section> -->
    <!-- article元素 代表HTML位当红一段独立成篇的内容 -->
    <article>
        <header>
            <hgroup>
                <h1 id="fruitsilike">Fruits I like</h1>
                <h2>How I Learned to Love Citrus</h2>
            </hgroup>
        </header>
        <!-- aside元素 侧边栏，用来表示跟周边内容稍微沾一点边的内容 -->
        <aside>
            <h1>Why Fruit is Healthy</h1>
            <section>
                Here are three reasons why everyone should eat more fruit:
                <ol>
                    <li>Fruit contains lots of vitamins</li>
                    <li>Fruit is a source of fibre</li>
                    <li>Fruit contains few calories</li>
                </ol>
            </section>
        </aside>
        I like apples and oranges.
        <section>
            <h1 id="morefruit">Additional fruits</h1>
            I also like bananas, mangoes, cherries, apricots, plums, peaches and grapes.
            <section>
                <h1>More information</h1>
                You can see other fruits I like <a href="./HTML_基本结构.html">here</a>.
            </section>
        </section>
        <footer>
            <nav>
                More Infomation:
                <a href="http://fruit.org">Learn More About Fruit</a>
            </nav>
        </footer>
    </article>
    <!-- </section> -->
    <!-- <section> -->
    <article>
        <header>
            <h1 id="activitiesilike">Activities I like</h1>
        </header>
        <section>
            <p>I like to swim, cycle and run. I am in training for my first triathlon,
                but it is hard work.</p>
            <h1 id="tritypes">Kinds of Triathlon</h1>
            There are different kinds of triathlon - sprint, Olympic and so on.
            <section>
                <h1 id="mytri">The kind of triathlon I am aiming for</h1>
                I am aiming for Olympic. which consists of the following:
                <ol>
                    <li>1.5km swim</li>
                    <li>40km cycle</li>
                    <li>10km run</li>
                </ol>
            </section>
        </section>
        <footer>
            <nav>
                More Information:
                <a href="http://triathlon.org">Learn More About Triathlons</a>
            </nav>
        </footer>
    </article>
    <!-- </section> -->
    <footer id="mainFooter">
        &#169;2011, Adam Freeman. <a href="http://apress.com">Visit Apress</a>
    </footer>
</body>

</html>